<template>
  <div class="skuDilog">
    <van-dialog v-model="vsibleSync" confirm-button-color="#548AF1" show-cancel-button theme="default" title="特征参数" @confirm="handleConfirm" @cancel="handleCancel">
      <div class="skuDilog-header">
        特征参数信息
      </div>
      <van-form >
        <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label="特征参数名称"
            placeholder="请选择"
            input-align="right"
            right-icon="arrow-down"
            @click="showPicker = true"
        />
      </van-form >
    </van-dialog>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
         value-key="label"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { Dialog, Toast, Tab, Tabs, Form, Col, Row } from "vant";
export default {
  data() {
    return {
      showPicker: false,
      value: "",
      columns: [{ label: "213123", value: "456" }],
    };
  },
  components:{
    [Form.name]:Form
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    vsibleSync: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    onConfirm() {
        
    },
    handleConfirm(){
        this.vsibleSync = false
    },
    handleCancel(){
        this.vsibleSync = false
    }
  },
};
</script>
<style scoped lang="scss">
.skuDilog{
    .skuDilog-header{
        padding: 14px 21px ;
        font-size: 15px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        position: relative;
        &::after{
         display: block;
         position: absolute;  
         content:"";
         width:4px ;
         height: 14px;
         border-radius:1px ;
         background: #548AF1;
         left: 12px;
         top: 50%;
         transform: translateY(-50%);
        }
    }
}
</style>
